<template>
  <div class="top">
    <div class="top__bgcolor"></div>
    <div class="top__header">
      <div class="top__header__back" @click="handleBackClick">
        <i class="custom-icon custom-icon-back"></i>
      </div>
      <span>确认订单</span>
    </div>
    <div class="top__receiver">
      <div class="top__receiver__title">收货地址</div>
      <div class="top__receiver__address">西安一二三大学四五六科技园2号楼</div>
      <div class="top__receiver__info">
        <span class="top__receiver__info__name">张三（先生）</span>
        <span class="top__receiver__info__phone">18012341234</span>
      </div>
      <div class="top__receiver__icon">
        <i class="custom-icon custom-icon-back"></i>
      </div>
    </div>
  </div>
</template>
<script>
  import { useRouter } from 'vue-router' // 路由跳转方法
  export default {
    name: 'TopArea',
    setup() {
      const router = useRouter()
      const handleBackClick = () => {
        router.back()
      }

      return { handleBackClick }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/style/viriables.scss';

  .top {
    position: relative;
    height: 1.96rem;
    background-size: 100% 1.59rem;
    /* 渐变轴为0度,相当于从下到上，
   高度4%位置从rgba(0, 145, 255, 0) 开始渐变
   到高度50%位置的蓝色（#0091ff）结束 */
    background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, $btn-bg-color 50%);
    background-repeat: no-repeat;

    &__header {
      position: relative;
      padding-top: 0.1rem;
      line-height: 0.24rem;
      color: $bg-color;
      text-align: center;
      font-size: 0.16rem;
      &__back {
        position: absolute;
        font-size: 0.22rem;
        left: 0.18rem;
      }
    }
    &__receiver {
      position: absolute;
      left: 0.18rem;
      right: 0.18rem;
      bottom: 0rem;
      height: 1.11rem;
      background: $bg-color;
      border-radius: 0.04rem;
      &__title {
        line-height: 0.22rem;
        padding: 0.16rem 0 0.14rem 0.16rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__address {
        line-height: 0.2rem;
        padding: 0 0.4rem 0 0.16rem;
        font-size: 0.16rem;
        color: $content-font-color;
      }
      &__info {
        padding: 0.06rem 0 0 0.16rem;
        &__name &__phone {
          margin-right: 0.1rem;
          line-height: 0.18rem;
          font-size: 0.12rem;
          color: $content-font-color;
        }
      }
      &__icon {
        //旋转180度
        transform: rotate(180deg);
        position: absolute;
        right: 0.16rem;
        top: 0.53rem;
        font-size: 0.16rem;
        color: $medium-font-color;
      }
    }
  }
</style>
